@extends('layouts.app')

@section('style')
    <style>
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
@stop

@section('content')
    <!--地图容器-->
    <div id="allmap"></div>
    <!--地图容器结束-->

    <!--标记弹窗-->
    <div class="biaoji">
        <div class="names">
            <p class="name" style="width: 100%;">古月桥</p>

            <a href="/bridges/2"><img src="/home/images/1.jpg"></a>
            <a href="/bridges/2"><p class="daohang">详情资料</p></a>
            <p class="guanbi">关闭</p>
        </div>
    </div>
    <!--标记弹窗结束-->


    <!--地图搜索-->
    <div class="dituserch">
        <input id="ditunameserch" placeholder="请输入古桥名称！">
        <ul class="serchming">
            <a href="guqiaodetail.html"><li>古月桥</li></a>
            <a href="guqiaodetail.html"><li>风景桥</li></a>
        </ul>

    </div>
    <!--地图搜索结束-->

    <ul class="bridges">
        @foreach($bridges as $bridge)
            <li data-bridge='{!! $bridge !!}'></li>
        @endforeach
    </ul>
@stop

@section('script')
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Et5sBUh5qT9mTzQmXAiShp520Mnt4wGe"></script>
    <script>




        $(".menutop .menutoptext .lefts img").click(function(){
            $(".muenus").show();
        })

        $(".biaoji .guanbi").click(function(){
            $(".biaoji").hide();
        })

        //搜索触发
        $('#ditunameserch').bind('input propertychange', function() {
            $(".dituserch .serchming").show();
        });





        $(".serchming li").click(function(){
            $(".dituserch .serchming").hide();
        })

        var bridges = [];
        $(".bridges>li").each(function(key, value){
            bridges.push($(this).data('bridge'));
        });
        console.log(bridges);



        //显示那个地区，给出地图金纬度坐标
        var longitude =bridges[0].latitude;
        var latitude =bridges[0].longitude;


        //创建地图“map-container”容器id，地图显示区域
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(longitude,latitude);
        map.centerAndZoom(point, 11);
        map.enableScrollWheelZoom(true);




        //遍历古桥标记
        window.onload=function () {
            var biaoimg;
            $.each(bridges,function(o,ls){

                //标注图片
                biaoimg="/home/images/biaoji.png";

                //创建标注
                var pt = new BMap.Point(ls.latitude,ls.longitude);
                var myIcon = new BMap.Icon(biaoimg, new BMap.Size(50,100),{
                    anchor: new BMap.Size(10, 47),
                    imageOffset: new BMap.Size(0 -0, 0 -0)
                });
                var marker = new BMap.Marker(pt,{icon:myIcon});
                map.addOverlay(marker);



                //为每个古桥标记添加点击事件
                marker.addEventListener("click",function(){
                        console.log(ls);

                        //点击标记，给弹窗填充内容
                        $(".biaoji .names .name").text(ls.bridge_name);//古桥名字
                        $(".biaoji .names img").attr("src",ls.front_cover);//古桥图片
                        $(".biaoji .names a").attr("href","/bridges/"+ls.id);//进入古桥详情页，通过id读取数据

                        //显示弹窗
                        $(".biaoji").show();

                    }
                )

            })
        }




    </script>
@stop

